<template>
  <div class="detail-container">
    <van-nav-bar :title="$t('h.menuPage.detail')" style="background: #ededed">
      <template #left>
        <van-icon name="arrow-left" size="24" color="#3d3d3d" @click="$router.go(-1)" />
      </template>
    </van-nav-bar>

    <div class="detail-box" v-show="showDetail">
      <div class="goods-img">
        <img :src="goodsItem.image_cdn ? goodsItem.image_cdn : localImg" />
      </div>
      <div class="detail-content">
        <div class="goods-title">
          <span>{{ goodsItem.name }}</span>
        </div>
        <div class="goods-desc">
          <span>{{ $t('h.menuPage.stock') + goodsItem.stock }}</span>
        </div>
        <div class="goods-price">
          <span>${{ goodsItem.discount_amount > 0 ? goodsItem.price - goodsItem.discount_amount : goodsItem.price }}</span>
          <span v-show="goodsItem.discount_amount > 0">${{ goodsItem.price }}</span>
        </div>
        <div class="goods-add">
          <Count :goodsItem="goodsItem"></Count>
        </div>
      </div>
      <div class="detail-text">
        <span>{{ $t('h.menuPage.detail') }}</span>
      </div>
    </div>

    <Cart></Cart>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Detail',
  data() {
    return {
      localImg: 'static/img/mxbc/Ice_Cream/Purple_Potato_Latte.jpeg',
      goodsItem: {},
      showDetail: false
    }
  },
  created() {
    // init goods current detail
    var id = this.$route.query.id
    var list = this.initGoodsList
    if (list.length) {
      var item = list.find(o => o.id === id)
      this.goodsItem = item
      this.showDetail = true
    }
  },
  computed: {
    // get goodslist data
    ...mapState({
      initGoodsList: state => state.home.shopsGoods
    })
  }
}
</script>

<style lang="less" scoped>
.detail-container {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 640px;
  background-color: #ededed;
}

.van-nav-bar {
  position: fixed;
  width: 100%;
  max-width: 640px;
  z-index: 3;
}

.detail-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  top: 46px;
  padding-bottom: 60px;
  background-color: #ebebeb;
  .goods-img {
    position: relative;
    overflow: hidden;
    width: 97%;
    height: 270px;
    border-radius: 9px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .detail-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 97%;
    margin-top: 0.45em;
    padding: 0.6em 0.9em;
    border-radius: 9px;
    background-color: white;
    .goods-title {
      font-size: 1.2em;
      font-weight: 650;
    }
    .goods-desc {
      color: #9c9c9c;
    }
    .goods-price {
      height: 36px;
      span:nth-child(1) {
        font-size: 1.2em;
        line-height: 36px;
        color: red;
      }
      span:nth-child(2) {
        margin-left: 0.3em;
        font-size: 1em;
        text-decoration: line-through;
        color: #9c9c9c;
      }
    }
    .goods-add {
      display: flex;
      justify-content: center;
      align-items: center;
      /deep/ .count-box {
        position: relative;
        transform: scale(1.2);
      }
    }
  }
  .detail-text {
    width: 97%;
    margin-top: 0.45em;
    padding: 0.9em 0.9em;
    border-radius: 9px;
    background-color: white;
  }
}
</style>
